<!-- @format -->

<template>
  <div class="lefe-cycle">
    <h3>生命周期</h3>
    <p>{{ count }}</p>
    <button @click="count++">+1</button>
  </div>
</template>

<script>
  // 导入 axios 模块
  import axios from 'axios'
  export default {
    data() {
      return {
        count: 0
      }
    },
    methods: {
      addCount() {
        this.count++
      },
      // 获取后台数据
      async getCartList() {
        const resp = await axios.get('https://www.escook.cn/api/cart')
        console.log(resp)
      }
    },
    beforeCreate() {
      // console.log('1-beforeCreate')
      // console.log(this.count) // undefined
      // this.addCount() // 报错
    },
    created() {
      // console.log('2-created')
      // console.log(this.count) // 0
      // this.addCount() // 方法会执行
      // 需求：一进入组件，发起ajax请求获取数据
      // 调用方法
      // this.getCartList()
      // 开启间歇定时器
      this.timerId = setInterval(() => {
        console.log('setInterval')
      }, 1000)
    },
    beforeMount() {
      // console.log('3-beforeMount')
      // console.log(document.querySelector('h3')) // null
      // document.querySelector('h3').style.color = 'red'// 报错
    },
    mounted() {
      // console.log('4-beforeMount')
      // console.log(document.querySelector('h3')) // <h3></h3>
      const h3 = document.querySelector('h3')
      h3.style.color = 'red'
    },
    beforeUpdate() {
      console.log('5-beforeUpdate')
      console.log(document.querySelector('p').innerText)
    },
    updated() {
      console.log('6-updated')
      console.log(document.querySelector('p').innerText)
    },
    beforeDestroy() {
      console.log('7-beforeDestroy')
      // 手动关闭定时器
      // clearInterval(this.timerId)
    },
    destroyed() {
      console.log('8-destroyed')
      // 手动关闭定时器
      clearInterval(this.timerId)
    }
  }
</script>

<style></style>
